#gf-main>section#gf-projects{
	overflow-y:hidden;
}
#gf-projects{
	transform-style: preserve-3d;
	perspective: 1200px;
	overflow:hidden;
	&.gf-showall{
		#gf-projects-drag{
			// transform: translate3d(0,0,-100em);
			// transform: translate3d(-50%,-50%,0);
			width:50%;
			height:50%;
			// top:25%;
			// left:25%;
		}
		#gf-projects-wraper{
			// transform: translate3d(0,0,-100em);
			box-shadow:  0 0 50px rgba(0,0,0,0.2);
		}
		.gf-project-holder:not(.active){
			opacity:0.4;

		}
		.gf-project-holder{
			.gf-project-info{ 
				opacity:0;
				transition: opacity 0.3s ease;
			}
		}
		.gf-project-holder.active{
			.gf-project-title{
				opacity:1;
				transform: translateY(0);
			}
		}
		
	}// end of gf-showall
	// &.gf-showall.gf-leave{
	// 	#gf-projects-drag{

	// 	}
	// }
	&.gf-leave,&.gf-showall.gf-leave{
		#gf-projects-drag{
			transition: transform 0.9s ease-out,
				top 0.9s ease-out,
				left 0.9s ease-out;

			transform: translate3d(0,-105%,0);
			top: 0;
			left:0;
		}
	}

}
#gf-projects-drag{
	height: 100%;
	width:100%;
	position:absolute;
	top: 50%;
	left:50%;
	transform: translate3d(-50%,-50%,0);
	transform-origin: 0 0;
	cursor: grab;
	user-select:none;
	// transition: all 0.3s ease-out;
	transition: transform 0.3s ease-out,
				width 0.3s ease-out,
				height 0.3s ease-out;
}
#gf-projects-wraper{
	position:absolute;
	top: 0;
	left: 0;
	height: 100%;
	// transition: transform 0.3s ease-out;
}
#gf-projects-switch{
	// font-size: 20px;
	display:block;
	position:absolute;
	top: 2em;
  	right: 10em;
  	z-index: 10;
  	width: 100px;
  	height: 100px;
  	cursor: pointer;
  	background: url('../img/page/switchmin.svg') center center no-repeat;
  	.gf-showall  & {
  		background: url('../img/page/switchmax.svg') center center no-repeat;
  	}
}
.gf-project-holder{
	position:relative;
	float: left;
	height: 100%;
	background-image: url('../images/1.jpg');
	background-size: cover;
	transition: opacity 0.3s;
	&:not(.active){
		
	}
	&::before{
		content:'';
		position:absolute;
		display: block;
		width: 100%;
		height: 100px;
		top:0;
		left:0;
		background-image: linear-gradient(to top,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.09),rgba(0, 0, 0, 0.2) );

	}
	.gf-project-title{
		text-align: center;
		position:absolute;
		bottom:-130px;
		width:100%;
		opacity: 0;
		transform: translateY(80px);
		transition: opacity 0.3s ease-out, transform 0.3s ease-out;
		// h1{margin: 0;}
		&>a{
			display:block;
			margin:0px auto;
			width: 60px;
			height: 60px;
			background: url('../img/icons/arrow-down.svg') center center no-repeat;
			animation:sway-up-down 1s ease-in-out infinite alternate;
			transform: rotate(-90deg);
		}
	}
}
.gf-project-info{
	position:absolute;
	width: 100%;
	min-height: 100px;
	bottom: 0;
	padding: 1em 3em;
	background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.6) );
	transition: opacity 0.3s 0.3s ease;
	font-style: italic;
	h1{
		font-size: 60px;
		margin-bottom: 10px;
	}
	p{
		font-size: 20px;
	}
	// text-align: center;
}